<template>
  <div class="AddOrUpdate_main add_container showDetail column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :inline="true">
        <el-form-item label="BOM编码">
          <div v-if="formData.code&&formData.code!=0" class="show">{{ formData.code }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料编码">
          <div v-if="formData.materialCode&&formData.materialCode!=0" class="show">{{ formData.materialCode }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料名称">
          <div v-if="formData.materialName&&formData.materialName!=0" class="show">{{ formData.materialName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="规格型号">
          <div v-if="formData.materialModel&&formData.materialModel!=0" class="show">{{ formData.materialModel }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料分类">
          <div v-if="formData.materialTypeName&&formData.materialTypeName!=0" class="show">{{ formData.materialTypeName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料单位">
          <div v-if="formData.materialUnitName&&formData.materialUnitName!=0" class="show">{{ formData.materialUnitName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="版本号">
          <div v-if="formData.versionCode&&formData.versionCode!=0" class="show">{{ formData.versionCode }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="附件" class="double">
          <FileManageFull
            :file-names="formData.fileName"
            :file-real-names="formData.fileRealName"
            :file-urls="formData.fileUrl"
            :row-index="1"
            :readonly="true"
            @fileName="setFileName"
          />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <div v-if="formData.remark&&formData.remark!=0" class="shows">{{ formData.remark }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="状态" class="double">
          <div v-if="formData.statusName" class="show">{{ formData.statusName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>

      </el-form>

      <div class="bom_bottom">
        <div class="bom_bottom_tree">
          <div class="tree_header">物料</div>
          <div class="tree_container">

            <el-tree
              ref="tree"
              :data="treeData"
              node-key="nodeKey"
              :expand-on-click-node="false"
              :default-expand-all="true"
              :highlight-current="true"
              @node-click="treeNodeClick"
            >
              <span slot-scope="{ node, data }" class="tree-node">
                <span class="node_name">{{ data.materialCode }}/{{ data.materialName }}</span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="bom_bottom_detail">
          <div class="formItem_header">
            父级物料
          </div>

          <div ref="table_container" class="table_container table_container2">
            <el-table
              ref="table"
              :data="tableData1"
              stripe
              border
              style="width: 99.9%"
            >
              <el-table-column label="物料编码" prop="materialCode" :show-overflow-tooltip="true" />
              <el-table-column label="物料名称" prop="materialName" :show-overflow-tooltip="true" />
              <el-table-column label="规格型号" prop="materialModel" :show-overflow-tooltip="true" />
              <el-table-column label="物料分类" prop="materialTypeName" :show-overflow-tooltip="true" />
              <el-table-column label="物料单位" prop="materialUnitName" :show-overflow-tooltip="true" />
              <el-table-column label="需求数量" fixed="right" prop="needNumber" :show-overflow-tooltip="true" />
            </el-table>
          </div>

          <div class="formItem_header formItem_header_padding">
            子级物料
            <div v-if="showMaterialName" class="MaterialName">
              <span class="MaterialNameIcon el-icon-warning" />
              <div v-for="item in tableData1" :key="item" class="MaterialNameName">
                <span>{{ item.needNumber }}</span>{{ item.materialUnitName }}<span>{{ item.materialCode + '/' + item.materialName }}</span>&nbsp&nbsp&nbsp<span>需要:</span>
              </div>
            </div>
            <div v-else />
          </div>
          <div ref="table_container" class="table_container table_container1">
            <el-table
              ref="table2"
              :data="tableData2"
              stripe
              border
              style="width: 99.9%"
            >
              <el-table-column label="物料编码" prop="materialCode" :show-overflow-tooltip="true" />
              <el-table-column label="物料名称" prop="materialName" :show-overflow-tooltip="true" />
              <el-table-column label="规格型号" prop="materialModel" :show-overflow-tooltip="true" />
              <el-table-column label="物料分类" prop="materialTypeName" :show-overflow-tooltip="true" />
              <el-table-column label="物料单位" prop="materialUnitName" :show-overflow-tooltip="true" />
              <el-table-column label="需求数量" fixed="right" prop="needNumber" :show-overflow-tooltip="true" />
              <el-table-column label="替代料" prop="replaceMaterialCodeName" :show-overflow-tooltip="true" />
              <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
            </el-table>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { getInfo } from '@/api/engineeringManage/BOMManage'
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    id: {},
    showKey: {},
    showData: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        code: undefined,
        versionCode: '',
        materialId: undefined,
        materialCode: undefined,
        materialName: undefined,
        materialModel: undefined,
        materialTypeName: undefined,
        materialUnitName: undefined,
        remark: undefined,
        fileName: '',
        fileRealName: '',
        fileUrl: '',
        status: '1',
        statusName: ''
      },
      treeData: [],
      tableData1: [],
      tableData2: [],
      currentNodeKey: undefined,
      currentNodeEL: undefined,
      currentNodeData: undefined,
      showMaterialName: false // 控制子级物料旁边提示是否显示
    }
  },
  mounted() {
    getInfo(this.id).then(res => {
      Object.keys(this.formData).forEach(key => { // 给右边数据赋值
        this.formData[key] = res.data[key]
      })
      this.showMaterialName = true // 选择物料之后 子集物料旁边提示的开关
      this.treeData = res.data.materialTree

      this.$nextTick(() => {
        document.querySelector('.el-tree-node__content').click()
      })
    })
  },
  methods: {
    setFileName(...data) {
      this.tableData[data[3]].fileName = data[0]
      this.tableData[data[3]].fileRealName = data[1]
      this.tableData[data[3]].fileUrl = data[2]
    },
    treeNodeClick(data, node, el) { // 点击树节点
      if (this.currentNodeKey == data.nodeKey) {
        return
      }
      const tag = true
      // if (this.formData.materialId != data.materialId || this.currentNodeKey != undefined) {
      //   const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
      //   if (tag && this.tableData2.length > 0 && this.tableData2.filter(item => !item.needNumber).length > 0) {
      //     this.$message({
      //       message: '需求数量不能为空',
      //       type: 'warning'
      //     })
      //     tag = false
      //   }
      //   if (tag && this.tableData2.length > 0 && this.tableData2.filter(item => !reg.test(item.needNumber)).length > 0) {
      //     this.$message({
      //       message: '需求数量错误',
      //       type: 'warning'
      //     })
      //     tag = false
      //   }
      // }
      if (tag) {
        this.currentNodeKey = node.data.nodeKey
        this.currentNodeEL = el
        this.currentNodeData = data
        this.tableData1 = [data]
        this.tableData2 = data.children ? this.$deepClone(data.children) : []
      } else {
        this.currentNodeEL.$el.click()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.shows {
  padding-top: 10px !important;
  padding-bottom: 10px ;
}
.table_container2 {
  padding-top: 0px !important;
}
.MaterialName {
  display: flex;
  padding: 15px;
  padding-top: 18px !important;
  flex: 1;
  color:rgb(244,156,31);
  text-align: center;
  font-size: 16px;
  align-items: center;
  margin-bottom: 3px;
  .MaterialNameName{
    max-width: 450px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .MaterialNameIcon {
    padding: 2px 5px 0 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.table_container1 {
  padding-bottom: 20px !important;
  padding-top: 0px !important;
}

.bom_bottom{
  display: flex;
  border-top: 1px solid rgba(105,105,105,0.2);
  margin-top: 20px;
  .bom_bottom_tree{
    width: 30%;
    border-right: 1px solid rgba(105,105,105,0.2);
    .tree_header{
      height: 50px;
      margin: 0 20px;
      display: flex;align-items: center;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #387BFC;
    }
    .tree_container{
      margin: 0 20px;
      overflow-x: auto;
      width: calc(100% - 40px);
      /deep/ .el-tree-node__content{
        height: 40px;
        .tree-node{
          flex: 1;
          display: flex;justify-content: space-between;align-items: center;
        }
        .node_operate{
          display: flex;align-items: center;
          .node_operate_item{
            display: flex;justify-content: center;align-items: center;
            margin-right: 20px;
          }
        }
        .el-tree-node__children{
          background-color: transparent;
        }

      }

      /deep/ .el-tree-node__children{
        min-width: fit-content;
      }
      /deep/ .el-tree-node__content:hover{
        background-color: rgba(56,123,252,0.5);
        color: white;
      }
    }
  }
  .bom_bottom_detail{
    width: 70%;
    .formItem_header_padding{
      margin-top: 3px;
    }
  }
}
.el-table {
  font-size: 15px;
}
/deep/ .el-form-item{
  .el-form-item__label{
    color: #1F51B3;
    font-size: 15px;
  }
  .el-form-item__content{
    color: #333333;
    font-size: 15px;
  }
}
.noData{
  color: #c0c4cc;
}
.FileManageFull_container{
  padding-top:10px ;
}
</style>
